<%@ page language="java" import="java.util.*"
	contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
	ArrayList<String> jsPaths = (ArrayList<String>) request
			.getAttribute("jsPaths");
	jsPaths.add("/resources/bootstrap/table/jquery.dataTables.min.js");
	jsPaths.add("/resources/bootstrap/table/dataTables.bootstrap.js");
	jsPaths.add("/resources/custom/user/user.js");
%>
<link
	href="${pageContext.request.contextPath}/resources/bootstrap/table/dataTables.bootstrap.css"
	rel="stylesheet">
<link
	href="${pageContext.request.contextPath}/resources/custom/user/user.css"
	rel="stylesheet">

<script type="text/javascript">
	var errorMsg = "${error}";
</script>
<div id="alert-warning"
	class="alert alert-warning alert-dismissable hidden">
	<button type="button" class="close" data-dismiss="alert"
		aria-hidden="true">&times;</button>
</div>

<div class="row">
	<h2 class="sub-header">User List</h2>
	<button class="btn btn-success btn-sm" id="addUser">Add User</button>
</div>
<div class="row top"></div>
<div class="row">
	<div class="table-responsive">
		<table class="table table-striped" id="user">
			<thead>
				<tr>
					<th>id</th>
					<th>User Name</th>
					<th>Nick Name</th>
					<th>Create Time</th>
					<th>System Role</th>
					<th>Options</th>
				</tr>
			</thead>
			<tbody>
			</tbody>
		</table>
	</div>
</div>

<!-- add user dialog -->
<div class="modal fade" id="createUserModal" tabindex="-1" role="dialog"
	aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal"
					aria-hidden="true">&times;</button>
				<h4 class="modal-title" id="myModalLabel">User</h4>
			</div>

			<form id="addForm" class="form-horizontal" role="form"
				action="${pageContext.request.contextPath}/user/create"
				method="post">
				<div class="modal-body">
					<div class="form-group">
						<label for="username" class="col-sm-3 control-label">User
							Name</label>
						<div class="col-sm-9">
							<input type="text" class="form-control" id="username"
								name="username" placeholder="User Name" />
						</div>
					</div>
					<div class="form-group">
						<label for="nickname" class="col-sm-3 control-label">Nick
							Name</label>
						<div class="col-sm-9">
							<input type="text" class="form-control" id="nickname"
								name="nickname" placeholder="Nick Name" />
						</div>
					</div>
					<div class="form-group">
						<label for="roleList" class="col-sm-3 control-label">Role
							Type</label>
						<div class="col-sm-9">
							<div class="dropdown">
								<button id="addDropDownBtn" type="button"
									class="btn btn-default dropdown-toggle" data-toggle="dropdown">
								</button>
								<input type="hidden" id="roleId" name="roleId" />
								<ul id="add-menu" class="dropdown-menu" role="menu"
									aria-labelledby="roleName">
								</ul>
							</div>
						</div>
					</div>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
					<button type="submit" class="btn btn-primary">Create</button>
				</div>
			</form>
		</div>
	</div>
</div>
<!-- edit user dialog -->
<div class="modal fade" id="editUserModal" tabindex="-1" role="dialog"
	aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal"
					aria-hidden="true">&times;</button>
				<h4 class="modal-title" id="myModalLabel">User</h4>
			</div>
			<form id="editForm" class="form-horizontal" role="form"
				action="${pageContext.request.contextPath}/user/update"
				method="post">
				<div class="modal-body">
					<input type="hidden" id="idE" name="id">
					<div class="form-group">
						<label for="username" class="col-sm-3 control-label">User
							Name</label>
						<div class="col-sm-9">
							<input type="text" class="form-control" id="usernameE"
								name="username" placeholder="User Name" />
						</div>
					</div>
					<div class="form-group">
						<label for="nickname" class="col-sm-3 control-label">Nick
							Name</label>
						<div class="col-sm-9">
							<input type="text" class="form-control" id="nicknameE"
								name="nickname" placeholder="Nick Name" />
						</div>
					</div>
					<div class="form-group">
						<label for="roleList" class="col-sm-3 control-label">Role
							Type</label>
						<div class="col-sm-9">
							<div class="dropdown">
								<button id="editDropDownBtn" type="button"
									class="btn btn-default dropdown-toggle" data-toggle="dropdown">
								</button>
								<input type="hidden" id="roleIdE" name="roleId" />
								<ul id="edit-menu" class="dropdown-menu" role="menu"
									aria-labelledby="roleName">
								</ul>

							</div>
						</div>
					</div>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
					<button type="submit" class="btn btn-primary">Save User</button>
				</div>
			</form>
		</div>
	</div>
</div>

<!-- delete user dialog -->
<div class="modal fade" id="deleteUserModal">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal"
					aria-hidden="true">&times;</button>
				<h4 class="modal-title">User Delete</h4>
			</div>
			<div class="modal-body">
				<p>This action will delete user information without recovery,
					are you sure to do this?</p>
			</div>
			<form class="form-horizontal" role="form"
				action="${pageContext.request.contextPath}/user/delete"
				method="post">
				<input type="hidden" id="idD" name="id">
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
					<button type="submit" class="btn btn-primary">Delete</button>
				</div>
			</form>
		</div>
	</div>
</div>
